<template>
  <div class="product_detail">
    <div class="product_detail_box">
      <div class="product_box" v-for="(item, index) in shopList" :key="index">
        <img
          class="product_img"
          style="width: 150px"
          :src="'http://localhost:3100/js' + item.image.split(',')[0]"
          alt=""
          @click="toProductDetail(item.id)"
        />
        <div class="product_info"
             @click="toProductDetail(item.id)">
          <div class="product_tit">{{ item.name }}</div>
          <div class="product_price">
            <div class="price">
              <span class="price_text">￥</span>
              <span class="price_num">{{ item.marketPrice }}</span>
            </div>
          </div>
          <div class="product_brand">
            <span class="product_label">品牌：</span>
            {{ item.brand }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="ProductDetail">
  import { ref, onMounted } from 'vue';
  import {Layout, LayoutHeader, LayoutContent, LayoutFooter, Col, Card} from 'ant-design-vue';
  import Header from './components/Header.vue';
  import Footer from './components/Footer.vue';
  import Home from './Home.vue';
  import Shop from './Shop.vue';
  import { jydqMyFavorite } from "/src/api/jydq/jydqProduct";
  import { router } from "/src/router";

  const shopList = ref([]);
  const currentKey = ref('1');
  const selectKey = (key: string) => {
    currentKey.value = key;
  };
  onMounted(async () => {
    const res = await jydqMyFavorite({ keyword: router.currentRoute.value.query.keyword });
    shopList.value = res.list;
  });
  const toProductDetail = (value: string) => {
    router.push({ path: '/client/productDetail1', query: { key: '', value: value } });
  };
</script>
<style scoped lang="less">
  .product_detail {
    padding: 0 16vw;
    .product_detail_box {
      min-height: 70vh;
      background: #fff;
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1), 0 6px 4px 0 rgba(0, 0, 0, 0.1);
      padding: 40px 60px;

      /* 设置弹性布局并添加间隙 */
      display: flex;
      flex-wrap: wrap;
      gap: 30px; /* 卡片之间的间距 */

      .product_box {
        border-radius: 8px;
        background: #f8f9fa;
        display: flex;
        //flex-direction: column; /* 确保内容垂直排列 */
        width: calc(50% - 15px); /* 两列等分计算公式 */
        height: 200px; /* 限制卡片高度 */
        //min-width: 300px; /* 设置最小宽度防止过小屏幕下布局错乱 */
        //overflow: hidden; /* 超出部分隐藏 */
        .product_img {
          width: 150px; /* 固定图片宽度 */
          height: 100%; /* 图片占满卡片高度 */
          border-top-left-radius: 8px;
          border-bottom-left-radius: 8px;
          object-fit: cover; /* 保持图片比例 */
        }
        .product_info {
          flex: 1; /* 占据剩余空间 */
          padding: 24px; /* 内边距 */
          display: flex;
          flex-direction: column;
          .product_tit {
            font-size: 24px;
            font-weight: bold;
            color: #333333;
            margin-bottom: 10px;
          }
          .product_price {
            .price {
              font-size: 14px;
              font-weight: bold;
              // color: #333333;
              color: #e4393c;
            }
            .price_num {
              font-size: 24px;
            }
          }
          .product_brand {
            font-size: 13px;
            color: #333;
            margin-bottom: 6px;
          }
          .product_label {
            font-weight: 600;
            font-family: '微软雅黑';
          }
        }
      }
    }
  }
</style>
